<template>
  <div class="linkage">
    <el-select
      v-model="province"
      @change="onProvinceChange"
      placeholder="省级地区">
      <el-option
        v-for="item in allProvinces"
        :key="item.province_gbcode"
        :label="item.province_name"
        :value="item.province_gbcode">
      </el-option>
    </el-select>
    <el-select
      v-model="city"
      :multiple="cityMultiple"
      @change="onCityChange"
      placeholder="市级地区">
      <el-option
        v-for="item in allCities"
        :key="item.city_gbcode"
        :label="item.city_name"
        :value="item.city_gbcode">
      </el-option>
    </el-select>
    <!-- <el-select
      v-model="district"
      @change="choseBlock"
      placeholder="区级地区">
      <el-option
        v-for="item in allDistricts"
        :key="item.id"
        :label="item.value"
        :value="item.id">
      </el-option>
    </el-select> -->
  </div>
</template>

<script>
import axios from 'axios'

export default {
  props: {
    'cityMultiple': {
      type: Boolean,
    },
    selectedCities: {}
  },
  created: function(){
    this.init()
  },
  data () {
    return {
      allProvinces:[],
      province: '',
      city: '',
      // 已选中城市的对象 { city_gbcode, city_name }
      cityObj: '',
      allCities: [],
      district: '',
      allDistricts: [],
    }
  },
  methods:{
    init() {
      if (this.selectedCities) {
        this.city = this.selectedCities
      }
      this.getCityData()
    },
    // 加载中国城市数据
    getCityData: function(){
      var that = this

      // 查询国内所有省，直辖市数据
      axios.get('/api/geo/city').then(function(response){
        if (response.status == 200) {
          // console.log('省市联动组件， 省查询结果：', response)
          const result = response.data
          if (result.code === 0) {
            that.allProvinces = result.data
          }
        } else{
          console.log('省查询失败，结果：', response)
          console.log(response.status)
        }
      }).catch(function(error){console.error('省查询失败，error:', error)})
    },
    // 省改变的处理方法
    onProvinceChange: function(event) {
      var that = this
      // 根据选择的省，查询省下属的市
      axios.get('/api/geo/city', {
        params: {
          gbcode: event
        }
      }).then(function(response){
        if (response.status == 200) {
          console.log('省市联动组件， 市查询结果：', response)
          const result = response.data
          if (result.code === 0) {
            that.allCities = result.data
          }
        } else{
          console.log('市查询失败，结果：', response)
          console.log(response.status)
        }
      }).catch(function(error){console.error('市查询失败，error:', error)})
    },
    // 市改变的处理方法
    onCityChange: function(event) {

      // console.log('city change: ', event)
      let code = event
      if (!Array.isArray(event)) {
        code = [event]
      }
      
      // 查询所有选中城市对象
      const codeArray = code
      const selectedCity = this.allCities.filter(item => {
        return codeArray.includes(item.city_gbcode)
      })
      // console.log('selectedCity = ', selectedCity)

      if (this.cityMultiple && selectedCity.length > 0) {
        // 多选的情况下
        this.cityObj = selectedCity
      } else {
        // 单选的情况下
        this.cityObj = selectedCity[0]
      }

      // 发射城市改变的事件
      this.emmitChange(this.cityObj)
      // console.log('cityObj = ', this.cityObj)
    },
    // 发射自定义事件 city:change
    emmitChange(data) {
      this.$emit('city:change', data)
    },
    // 选区
    choseBlock:function(e) {
      this.E=e;
      // console.log(this.E)
    },
  },
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>
